<template>
  <div :class="!isPast&&info.balance?'cash-coupon-item':'cash-coupon-item past-cash-coupon-item'">
    <div class="left">
      <span>{{info.sum}}</span>
      <span>元</span>
    </div>
    <div class="divide"></div>
    <div class="right">
      <div class="cash-info">
        <span>平台现金抵用券</span>
        <span v-if="info.status===10">{{info.expirationTime}}过期</span>
      </div>
      <div
        class="past-content"
        v-if="isPast&&info.balance&&info.status!==1"
      >
        <span>过期</span>
      </div>
      <div
        class="past-content"
        v-if="!info.balance"
      >
        <span>已用</span>
      </div>
      <div
        class="valid-content"
        v-if="!isPast&&info.balance&&info.status!==1"
      >
        <span v-if="info.balance">剩{{info.balance}}元可用</span>
        <van-button
          v-if="!isPast"
          type="primary"
          round
          @click='onImmediatelyExchangeClick'
        >立即兑换</van-button>
      </div>
      <div
        class="valid-content"
        v-if="!isPast&&info.balance&&info.status===1"
      >
        <van-button
          type="primary"
          round
          @click='activateCashCoupun'
        >立即激活</van-button>
      </div>
    </div>
  </div>
</template>


<script>
import { Button } from "vant";
export default {
  name: "CashCouponItem",
  components: {
    [Button.name]: Button,
  },
  props: {
    isLink: {
      type: Boolean,
      default: false,
    },
    showBottomImg: {
      type: Boolean,
      default: false,
    },
    showEdmit: {
      type: Boolean,
      default: false,
    },
    cashCouponInfo: {
      type: Object,
      default: {},
    },
  },
  watch: {
    cashCouponInfo: {
      deep: true,
      handler: function (newVal) {
        this.info = newVal;
      },
    },
  },
  computed: {
    isPast: function () {
      if (this.info.expirationTime) {
        let infoTime = this.info.expirationTime.replace(/-/g, "/");
        if (new Date(infoTime) > new Date()) {
          return false;
        }
        return true;
      }
      return false;
    },
  },
  data() {
    return {
      info: {},
    };
  },
  created() {
    this.info = this.cashCouponInfo;
  },
  methods: {
    onImmediatelyExchangeClick() {
      this.$emit("onImmediatelyExchangeClick", this.info);
    },
    activateCashCoupun(){
      this.$emit("activateCashCoupun", this.info);
    }
  },
};
</script>

<style scoped lang="less">
.cash-coupon-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 162px;

  .left {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    background: linear-gradient(135deg, transparent 0, #ffffff 0) top left,
      linear-gradient(-135deg, transparent 12px, #ffffff 0) top right,
      linear-gradient(-45deg, transparent 12px, #ffffff 0) bottom right,
      linear-gradient(45deg, transparent 0, #ffffff 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    width: 162px;
    height: 100%;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;

    span:first-child {
      font-size: 85px;
      font-weight: bold;
      color: #df5438;
    }

    span:last-child {
      font-size: 22px;
      font-weight: 500;
      color: #df5438;
      margin-top: 30px;
    }
  }

  .divide {
    width: 1px;
    height: 128px;
    border: 1px solid #d8bcbf;
  }

  .right {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 165px);
    height: 100%;
    padding: 0 39px;
    box-sizing: border-box;
    background: linear-gradient(135deg, transparent 12px, #ffffff 0) top left,
      linear-gradient(-135deg, transparent 0, #ffffff 0) top right,
      linear-gradient(-45deg, transparent 0, #ffffff 0) bottom right,
      linear-gradient(45deg, transparent 12px, #ffffff 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;

    .cash-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      flex-wrap: wrap;
      span:nth-child(2) {
        font-size: 20px;
        color: #888888;
        margin-top: 8px;
      }
    }
    .past-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      span:first-child {
        font-size: 24px;
        font-weight: 500;
        color: #222222;
        line-height: 33px;
      }

      span:nth-child(2) {
        font-size: 20px;
        color: #888888;
        line-height: 28px;
        margin-top: 8px;
      }
    }
    .valid-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      > span {
        font-size: 22px;
        color: #df5438;
        margin-bottom: 2px;
      }
      .van-button--primary {
        height: 48px;
        padding: 0 24px;
        background: #3f87f0;
        border: none;
        font-size: 24px;
        font-weight: 500;
        color: #ffffff;
      }
    }
  }
}

.cash-coupon-item.past-cash-coupon-item {
  opacity: 0.59;

  .right {
    position: relative;
    overflow: hidden;

    .past-content {
      position: absolute;
      top: -25px;
      right: -25px;
      width: 140px;
      height: 140px;
      background-color: none;
      border-radius: 50%;
      border: 2px solid #df5438;
      span {
        font-size: 42px;
        font-weight: bold;
        color: #df5438;
        -moz-transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
        display: block;
        position: absolute;
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
      }
    }
    .past-content:after {
      content: "";
      display: block;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background-color: none;
      position: relative;
      top: 0px;
      left: 0px;
      right: 0;
      bottom: 0;
      margin: auto;
      border: 2px solid #df5438;
    }
  }
}
</style>
